/**************************************
 *
 * VLOOK CSS - Typora 编辑时内置样式
 * (配合 base.less 进行使用)
 *
 * V15.1
 * 2022-06-25
 * powered by MAX°孟兆
 *
 * QQ Group: 805502564
 * email: maxchow@qq.com
 *
 * https://github.com/MadMaxChow/VLOOK
 * https://gitee.com/madmaxchow/VLOOK
 *
 *************************************/

:root {
    --cm-keyword-lg: #770088;
    --cm-variable-lg: var(--d-f-c-lg);
    --cm-variable-2-lg: #0055AA;
    --cm-variable-3-lg: #008855;
    --cm-tag-lg: #9ab696;
    --cm-attribute-lg: #0000CC;
    // --cm-CodeMirror-cursor-lg: @docTextColorLightAlt;
    --cm-string-lg: #AA1111;
    --cm-string-2-lg: #FF5500;
    --cm-comment-lg: #AA5500;
    --cm-header-lg: #0000FF;
    --cm-quote-lg: #009900;
    --cm-hr-lg: #999999;
    --cm-link-lg: #0000CC;
    --cm-negative-lg: #DD4444;
    --cm-positive-lg: #229922;
    --cm-meta-lg: #555555;
    --cm-bulidin-lg: #3300AA;
    --cm-bracket-lg: #999977;
    --cm-atom-lg: #221199;
    --cm-number-lg: #116644;

    --cm-keyword-dk: #C88FD0;
    --cm-variable-dk: var(--d-f-c-dk);
    --cm-variable-2-dk: #9FBAD5;
    --cm-variable-3-dk: #1CC685;
    --cm-tag-dk: #7DF46A;
    --cm-attribute-dk: #7575E4;
    --cm-string-dk: #D26B6B;
    --cm-string-2-dk: #FF5500;
    --cm-comment-dk: #DA924A;
    --cm-header-dk: #8D8DF0;
    --cm-quote-dk: #57AC57;
    --cm-hr-dk: #D8D5D5;
    --cm-link-dk: #D3D3EF;
    --cm-negative-dk: #D95050;
    --cm-positive-dk: #50E650;
    --cm-meta-dk: #B7B3B3;
    --cm-bulidin-dk: #F3B3F8;
    --cm-bracket-dk: #999977;
    --cm-atom-dk: #84B6CB;
    --cm-number-dk: #64AB8F;

    --cm-keyword: var(--cm-keyword-lg);
    --cm-variable: var(--cm-variable-lg);
    --cm-variable-2: var(--cm-variable-2-lg);
    --cm-variable-3: var(--cm-variable-3-lg);
    --cm-tag: var(--cm-tag-lg);
    --cm-attribute: var(--cm-attribute-lg);
    --cm-CodeMirror-cursor: @aHoverColor;//var(--cm-CodeMirror-cursor-lg);
    --cm-string: var(--cm-string-lg);
    --cm-string-2: var(--cm-string-2-lg);
    --cm-comment: var(--cm-comment-lg);
    --cm-header: var(--cm-header-lg);
    --cm-quote: var(--cm-quote-lg);
    --cm-hr: var(--cm-hr-lg);
    --cm-link: var(--cm-link-lg);
    --cm-negative: var(--cm-negative-lg);
    --cm-positive: var(--cm-positive-lg);
    --cm-meta: var(--cm-meta-lg);
    --cm-bulidin: var(--cm-bulidin-lg);
    --cm-bracket: var(--cm-bracket-lg);
    --cm-atom: var(--cm-atom-lg);
    --cm-number: var(--cm-number-lg);

    // --------------------
    // Typora UI 颜色变量
    --bg-color: var(--d-bc-lg);//var(--d-bc-tsp-lg); // 替换为透明色，以在 Typora 编辑时正常显示背景图片
    --side-bar-bg-color: var(--d-bc-lg);
    --text-color: var(--d-f-c-lg);

    --select-text-font-color: var(--d-bc);
    --select-text-bg-color: @selectionColor;

    --search-select-bg-color: @selectionColor;

    --control-text-color: var(--d-f-c-lg);
    --control-text-hover-color: var(--d-f-c-lg);
    --window-border: 1px solid var(--pn-c-lg);

    --active-file-bg-color:  var(--d-bc-lg);
    --active-file-bder: var(--select-text-bg-color);
    --active-file-text-color: var(--d-f-c-lg);

    --item-hover-bg-color: var(--pn-c-lg);
    --item-hover-text-color: var(--d-f-c-lg);

    --primary-color: @themeBgColor;

    --rawblock-edit-panel-bd: var(--d-bc-lg);
}

// input {
//     background: var(--d-bc);
// }

// 保留原始 fa 图标强制使用指定的字体
.fa {
    font-family: FontAwesome !important;
}

.md-toc-inner {
    text-decoration: none;
    box-shadow: none;
}

// 大纲 / 文件面板图标
.ty-icon,
.file-node-icon,
.outline-expander::before,
.ion-ios7-search-strong::before,
#md-notification::before,
.ion-chevron-left:before,
.fa-code:before,
#top-titlebar .ty-menu-btn-area-sub1,
#top-titlebar .ty-menu-btn-area-sub2,
#top-titlebar .ty-menu-btn-area-sub3,
.fa-sort-desc:before,
.fa-sort-asc:before {
    color: var(--h-f);
}
.ion-folder:before {
    color: var(--d-f-c-lg);
}

#top-titlebar .ty-icon {
    color: var(--d-f-c);
}
.megamenu-opened #top-titlebar .ty-icon {
    color: var(--d-f-c-lg);
}

.ty-menu-btn-area > span {
    border-top-width: 2px;
}
.ty-sidebar-search-panel svg.icon {
    fill: var(--h-f);
}
.fa-folder::before,
.fa-caret-right::before {
    color: var(--d-f-c-alt);
}
.md-resize-table .ty-icon,
.md-align-gp .ty-icon {
    color: @aLineColor;
}
.ion-android-arrow-back:before {
    color: @buttonForeColor;
}

// 删除表格
.md-delete-table .ty-icon {
    color: var(--ac-red-lg);
}

.md-notification-container {
    background: var(--d-bc) !important;
}

// 导出成功后通知栏图标
#md-notification::before {
    top: 16px;
}

// 导出成功后通知栏链接图标
#md-notification a {
    color: var(--a-color);
    text-decoration: none;
    // border-bottom: @aBorderWidth solid @aLineColor;
    font-weight: var(--v-f-w-bd);
}
#md-notification a.default-btn {
    // border-bottom: @aBorderWidth solid @aLineColor;
}
#md-notification a:hover,
#md-notification a.default-btn:hover {
    color: @aHoverColor;
    // box-shadow: 0 -0.3em 0 0 fade(@aLineColor, 30%) inset;
}
// #md-notification::before {
//     top: 10px;
// }

#md-notification .btn {
    border-radius: var(--v-r-s);
    margin-left: 5px;
    color: @buttonForeColor !important;
    background: @buttonBgColor !important;
}
#md-notification .btn:hover {
    color: @buttonForeHoverColor !important;
    background: @aHoverColor !important;
}
#md-notification .btn-default {
    font-weight: var(--v-f-w-title);
}

// 注释
.md-comment {
    color: var(--d-f-c-alt);
    font-family: inherit;
    // font-style: italic;
}

// for Win 一体化菜单
body.os-windows .megamenu-menu,
body.os-windows .megamenu-menu-header-title-menu {
    background: @buttonBgColor;
    color: @buttonForeColor;
}
.megamenu-menu-header {
    border-bottom-color: @buttonForeColor;
}
#megamenu-back-btn {
    border-color: @buttonBgColor;
}
.megamenu-menu-panel {
    color: var(--d-f-c-alt-lg);
}

.megamenu-menu-list li a {
    color: @buttonForeColor;
}
.megamenu-menu-list li a.active {
    background: @aActiveColor !important;
    color: @buttonForeHoverColor;
}
.megamenu-menu-list:not(.saved) li a:hover {
    background: @aHoverColor !important;
    color: @buttonForeHoverColor;
}

// 用于在 Typora Windows 版本的一体化菜单中，进行主题选择时的预览效果
body:not([class]) h1,
body:not([class]) h2,
body:not([class]) h3,
body:not([class]) h4,
body:not([class]) h5,
body:not([class]) h6 {
    color: var(--h-f);
}

.btn,
.sidebar-footer-main-item-label {
    font-family: var(--v-f-fm-bd);
}

.btn,
.megamenu-content input {
    border-radius: var(--v-r-s);
    color: var(--d-f-c);
}
.megamenu-section input {
    background: var(--d-bc-lg);
    color: var(--d-f-c-lg);
}

.megamenu-content table {
    color: var(--d-f-c-lg);
}

.megamenu-section .long-btn,
.megamenu-section .btn {
    border-radius: var(--v-r-s);
    color: var(--d-f-c-lg);
}
.megamenu-section .long-btn:hover,
.megamenu-section .btn:hover {
    color: var(--d-f-c-lg) !important;
    background: var(--blockquote-bg-lg);
}

.megamenu-menu-header:focus,
.megamenu-menu-header:hover,
.megamenu-menu-header:hover #megamenu-menu-header-title {
    color: @buttonForeColor;
}

.btn-primary {
    color: @buttonForeColor;
    background: @buttonBgColor;
    font-weight: var(--v-f-w-title);
}
.btn-primary:hover {
    background: @aHoverColor;
}
.btn-primary:active {
    background: @aActiveColor;
}

// for Win 左侧面板标签底部当前选中的边框
body.os-windows .active-tab-files #info-panel-tab-file .info-panel-tab-border,
body.os-windows .active-tab-outline #info-panel-tab-outline .info-panel-tab-border {
    background: @buttonBgColor;
}


.md-image-src-span, // 图片链接
.md-link .md-url { // 链接
    color: var(--d-f-c-alt);
    font-family: var(--monospace);
    // color: @aLineColor;
    font-weight: var(--v-f-w-text);
    text-decoration: none;
}
kbd .md-image-src-span,
kbd .md-link .md-url {
    color: var(--pn-c);
}

// 图片相关按钮
.md-image-btn {
    background: @buttonBgColor;
}
.md-image-btn:hover {
    background: @aHoverColor;
}
.md-image-input-src-btn {
    line-height: @defaultLineHeight;
    height: 30px;
    background: var(--pn-c);
    box-shadow: 0 0 0 1px @buttonBgColor inset;
    border-radius: var(--v-r-si) 0 0 var(--v-r-si);
}
.md-image-input-src-btn::before {
    color: var(--d-f-c-alt);
}
.md-image-input-src-btn.selected,
.md-image-input-src-btn:hover {
    background: none;
}
.md-image-pick-file-btn {
    line-height: @defaultLineHeight;
    height: 30px;
    border-left-color: var(--d-bc);
    border-radius: 0 var(--v-r-si) var(--v-r-si) 0;
}
// for Win
body.os-windows .md-image-input-src-btn,
body.os-windows .md-image-pick-file-btn {
    line-height: @paragraphInnerLineHeight;
}

// br 回车
.hide-br-and-line-break .md-expand .md-br-content,
.md-raw-inline {
    font-size: 0.75em;
    color: @buttonBgColor;
}

// HTML 标签
.md-html-inline .md-meta {
    font-size: 0.75em;
    font-weight: normal;
    opacity: 0.5 !important;
}
.md-html-inline kbd .md-meta {
    font-size: 1em;
    opacity: 1 !important;
}

// 图片链接
.md-image > .md-meta {
    color: var(--h-f);
}
kbd .md-image > .md-meta {
    color: @buttonForeColor;
    font-weight: normal;
}

// 编辑状态时，a 内的 kbd 获得焦点
#write .md-focus a kbd:hover {
    background: var(--ac-theme1) !important;
}

// 当前焦点、焦点行
.md-focus .md-expand {
    border-bottom: @focusStyle !important;
}
.md-focus-container::before {
    content: @focusCursor !important;
    position: absolute;
    left: -15px !important;
}
#write h6 + figure table .md-focus-container::before,
#write li > figure table .md-focus-container::before {
    left: 1em !important;
}
li > figure .md-focus-container::before,
h6 + figure .md-focus-container::before {
    left: 10px;
}
// 当前段落（与列表段落配套）
p.md-focus::before {
    content: @focusCursor;
    position: absolute;
    left: -20px;
}
// 当前列表段落
li.md-focus-container::before {
    content: "" !important;
    position: absolute;
}
li p.md-focus::before { // 段落微调
    left: -30px;
}
li.md-task-list-item p.md-focus::before { // 任务列表微调
    left: -50px;
}

// YAML / code 获得焦点
#write > pre.md-meta-block.md-focus, // YAML 等获得焦点
#write .md-expand code { // code 获得焦点
// #write > .md-expand code { // code 获得焦点
    // background: fade(@aLineColor, 20%) !important;
    color: var(--d-f-c) !important;
    background: var(--ac-theme2-alt) !important;
    caret-color: @aHoverColor;//var(--d-bc);
}
// 封面：#write 下 H6 作为第一个元素时
// #write > pre.md-meta-block:first-child + h6 .md-expand code, // 有 YAML 的情况
// #write > h6:first-child .md-expand code { // 无 YAML 的情况
// // // #write .md-expand code {
//     background: var(--ac-theme2) !important;
//     // // color: @buttonForeColor;
//     // caret-color: var(--d-bc);
// }
#write > pre.md-meta-block:first-child {
    margin-top: 20px;
}


#write > h3.md-focus::before,
#write > h4.md-focus::before,
#write > h5.md-focus::before,
#write > h6.md-focus::before,
h3.md-focus::before,
h4.md-focus::before,
h5.md-focus::before,
h6.md-focus::before {
    border: 0;
    // border: inherit;
    position: inherit;
    left: inherit;
    float: none;
    top: initial;
    font-size: inherit;
    vertical-align: inherit;
    font-weight: inherit;
    line-height: inherit;
}

// 修正获取焦点时抖动
h1.md-focus::before,
h2.md-focus::before,
h3.md-focus::before,
h4.md-focus::before,
h5.md-focus::before,
h6.md-focus::before {
    padding-left: 0;
    padding-right: 0;
}

// for Win
body.os-windows header,
body.os-windows .ty-footer {
    background: var(--d-bc) var(--d-bi);
}
body.os-windows #top-titlebar, // 标题栏
body.os-windows .ty-footer, // 底部栏
body.os-windows #typora-sidebar, // 侧边栏
body.os-windows #w-titlebar-left, // 标题栏主菜单入口
body.os-windows #w-traffic-lgs { // 最大化、最小化、关闭
    background: transparent;
}
body.os-windows .ty-footer { // 底栏
    border-top-color: var(--d-bc);
}

#typora-sidebar { // 侧边栏
    border-right: none;
}

.sidebar-tabs {
    border-bottom: none;
}

.sidebar-tab-btn {
    opacity: 0.4;
}

// 侧边栏
.sidebar-content {
    padding: 0 10px 10px 10px;
    background: none;
}
// 侧边栏当前活动 tab
.sidebar-tab.active {
    color: var(--h-f);
    font-family: var(--v-f-fm-title);
    font-weight: var(--v-f-w-title);
}
// 侧边栏 tab
.sidebar-tab.active::after {
    content: " ･ VLOOK " @themeDesc;
    text-transform: none;
    white-space: pre;
}
// for Win 侧边栏 tab
body.os-windows .info-panel-tab-title {
    white-space: pre;
    color: var(--h-f);
}
body.os-windows .info-panel-tab-title::after {
    content: " ･ VLOOK " @themeDesc;
    text-transform: none;
    white-space: pre;
    font-size: 0.75em;
}

// 大纲内容为空
#typora-sidebar .outline-content:empty {
    opacity: 0.4;
    border: 2px dashed var(--d-f-c-alt);
    border-radius: var(--v-r-b);
    background: none;
}
#typora-sidebar .outline-content:empty::after {
    content: "( Outline is Empty )";
    opacity: 1;
    color: var(--d-f-c);
}

// 文件库
.active-tab-files.use-file-tree-style .sidebar-content {
    bottom: 0;
}
#sidebar-content:hover #file-library {
    padding-bottom: 8px;
}
#typora-sidebar #file-library-tree {
    border-radius: var(--v-r-b);
    padding-top: 0;
    padding-left: 0;
}
#typora-sidebar #file-library-tree:not(:empty) {
    background: var(--pn-c);
    // background: var(--tbl-td-bg);
}

// 文件库内容为空
#typora-sidebar #file-library-tree:empty,
#typora-sidebar #file-library-list-children:empty {
    opacity: 0.4;
    border: 2px dashed var(--d-f-c-alt);
    border-radius: var(--v-r-b);
    background: none;
}
#typora-sidebar #file-library-tree:empty::after, // for macOS
body.os-windows #typora-sidebar #file-library-list-children:empty::after { // for Win
    content: "( No Folder is Opened )";
    opacity: 1;
    color: var(--d-f-c-alt);
}

// for Win 版样式的差异调整
body.os-windows #file-library-tree {
    height: 100%;
}

// 右边浮动显示的侧边栏
#toc-dropmenu {
    border-radius: var(--v-r-b);
    box-shadow: var(--v-float-shadow), var(--v-float-inn-shadow);
    top: 30px !important;
    right: 20px !important;
}
#toc-dropmenu > .outline-content {
    background: none;
    // border-radius: 0 0 0 var(--v-r-b);
}

// 右侧浮动大纲
.outline-title-wrapper {
    color: var(--h-f);
    text-transform: uppercase;
    padding-top: 10px;
    padding-bottom: 10px;
}
.outline-title {
    font-weight: var(--v-f-w-title);
    font-size: 1.25em;
}
.outline-title::after {
    content: " ･ VLOOK " @themeDesc;
}
#toc-dropmenu .divider {
    display: none;
}

// ----- 自动收起模式 -----
// 大纲面板的封面、封底条目
.outline-content > li:first-child.outline-h6 .outline-item { // 封面
    padding-top: 10px;
    padding-bottom: 10px;
}
.outline-content > li:first-child.outline-h6 .outline-item, // 封面
.outline-content > .outline-h6:first-child ~ .outline-h1:last-child > .outline-item { // 封底
    color: var(--d-f-c-alt);
    font-style: italic !important;
}
.outline-content > li:first-child.outline-h6 .outline-item code, // 封面
.outline-content > .outline-h6:first-child ~ .outline-h1:last-child > .outline-item code { // 封底
    color: inherit;
    background: none;
    font-family: var(--v-f-fm-tag);
    font-size: 1em;
    font-weight: inherit;
    padding: 0;
    box-shadow: none;
    display: inline;
    white-space: inherit;
}
// 大纲面板的封面、封底条目标识
.outline-content > li:first-child.outline-h6 .outline-item::before, // 封面
.outline-content > .outline-h6:first-child ~ .outline-h1:last-child > .outline-item::before { // 封底
    content: "COVER ▸";
    position: absolute;
    left: 10px;
    color: @aHoverColor;
    font-weight: var(--v-f-w-title);
    font-style: normal !important;
}
// 封底
.outline-content > .outline-h6:first-child ~ .outline-h1:last-child > .outline-item::before {
    content: "◂ BACK COVER";
    text-align: right;
    // top: 9px;
    right: 10px;
    line-height: @paragraphInnerLineHeight;
    font-size: 0.875em;
    font-style: normal !important;
}
.outline-content > .outline-h6:first-child ~ .outline-h1:last-child .outline-label::before {
    content: "";
}
// ----- 非自动收起模式 -----
.no-collapse-outline .outline-label {
    padding: 3px 6px !important;
}
// 大纲面板的封底条目
.no-collapse-outline .outline-content .outline-h6:first-child > .outline-item {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}
.no-collapse-outline .outline-content .outline-h6:first-child > .outline-item::before,
.no-collapse-outline .outline-content > .outline-h6:first-child ~ .outline-h1:last-child > .outline-item::before {
    // left: 6px !important;
    top: 6px !important;
}
.no-collapse-outline .outline-content > .outline-h6:first-child ~ .outline-h1:last-child > .outline-item::before {
    left: 6px !important;
    top: 8px !important;
    // font-size: 0.625em !important;
}

// 大纲面板
.outline-content {
    font-family: var(--v-f-fm-title);
    background: var(--pn-c);
    border-radius: var(--v-r-b);
    padding: 10px;
}
// 大纲节点
.outline-item {
    line-height: 1;//@defaultLineHeight;
    font-family: var(--v-f-fm-subtitle);
    font-weight: normal;
}
// 当前大纲节点
.pin-outline .outline-active,
.pin-outline .outline-active strong,
.pin-outline #outline-content .outline-active strong {
    font-weight: var(--v-f-w-title);
}
.outline-item-active {
    box-shadow: 0 0 0 2px fade(@headerColor, 50%) inset;
    border-radius: var(--v-r-s);
    background: var(--blockquote-bg);
    margin-left: 0;
    border-left-width: 0;
    margin-right: 0;
    border-right-width: 0;
    font-weight: var(--v-f-w-title);
}
// 大纲节点 hover
.outline-item:hover {
    background: var(--blockquote-bg);
    border-radius: var(--v-r-s);
    margin-left: 0;
    border-left-width: 0;
    margin-right: 0;
    border-right-width: 0;
}
// 大纲节点 active
.outline-item:active,
.outline-item:active .outline-label,
.outline-item:active .outline-label::before,
.outline-label:active {
    color: var(--d-bc);
    background: var(--d-f-c-alt);
}
.outline-item:active {
    box-shadow: 0 0 0 2px var(--tbl-bder);
}
// for before content, COVER, BACK COVER etc.
.outline-item:active > .outline-expander::before,
.outline-item:active::before {
    color: var(--d-bc) !important;
}

.outline-label:hover {
    text-decoration: none;
}

// 搜索、替换
#md-searchpanel .btn label {
    color: var(--d-f-c);
}
#md-searchpanel input {
    border-radius: var(--v-r-s);
    border-color: var(--tbl-bder);
}
.searchpanel-search-option-btn {
    color: @buttonBgColor;
}
.searchpanel-search-option-btn.active {
    color: @buttonForeColor;
}

// 快速打开
#typora-quick-open {
    font-family: var(--v-f-fm-tag);
    background: var(--pn-c);
    border-radius: var(--v-r-b);
    box-shadow: var(--v-float-shadow), var(--v-float-inn-shadow);
    border: 0;
}
// 快速打开输入框
#typora-quick-open-input {
    padding: 5px;
    font-family: var(--v-f-fm-text);
}
#typora-quick-open-input input {
    border-radius: var(--v-r-s);
    max-height: 40px;
    border-color: var(--tbl-bder);
    font-size: 1.5em;
}
.ty-quick-open-category-title {
    color: var(--h-f);
}
// 快速打开搜索结果条目
.typora-quick-open-item {
    height: 40px;
    padding-left: 20px;
    // padding-top: 5px;
}
.typora-quick-open-item.active {
    border-radius: var(--v-r-s);
    // background: var(--d-bc);
    background: var(--pn-c-alt);
    color: var(--d-f-c);
    margin-left: 5px;
    margin-right: 5px;
    padding-left: 15px;
}
.typora-quick-open-item-path {
    font-size: 0.625em;
}

// Typora 编辑时 UI 相关变量
:root {
    --active-file-bder: var(--h-f);
    --primary-color: var(--h-f);
    --active-file-bg: var(--pn-c);
    --active-file-text-color: var(--d-f-c);
    --text-color: var(--d-f-c);
    --active-toggle-btn-color: @buttonBgColor;
    --monospace: var(--v-f-fm-code);
    // --md-char-color: @buttonBgColor;
}

#write .code-tooltip {
    color: var(--d-bc);
    background: var(--d-f-c);
    font-family: var(--v-f-fm-subtitle);
    font-weight: var(--v-f-w-title);
    // color: var(--d-f-c-alt);
    // background: var(--blockquote-bg);
    border-radius: var(--v-r-si);
    box-shadow: none;
    padding: 0 2px;
}
#write .code-tooltip .ty-input:focus {
    background: var(--d-bc);
    color: var(--d-f-c);
    border-radius: var(--v-r-s);
}

// 目录/文件节点
.file-tree-node {
    font-family: var(--v-f-fm-bd);
}
// 目录节点
.file-tree-node[data-has-sub=true] {
    font-weight: var(--v-f-w-title);
}
.file-tree-node[data-has-sub=false] {
    font-weight: normal;
}
// 节点
.file-node-content {
    cursor: pointer;
}
// 点击节点
.file-library-node:not(.file-node-root):focus > .file-node-content {
    outline: 0;
}
// 文件名（含扩展名）
.file-node-title {
    margin-top: -4px;
}
body.os-windows .file-node-title { // for Win
    margin-top: 0px;
}
// 扩展名
.file-node-title-ext-part {
    color: var(--d-f-c-alt);
}

// ----------------------------------------
// 源码模式
#typora-source .CodeMirror {
    font-family: var(--monospace);
}
#typora-source .CodeMirror-lines {
    margin: 0 10px;
    max-width: 100%;
}
#typora-source .CodeMirror pre {
    font-family: var(--v-f-fm-text);
}
// 闪动光标
#typora-source .CodeMirror-cursor {
    border-color: @aHoverColor;
}
// 标题
#typora-source .cm-header {
    color: var(--h-f);
    font-family: var(--v-f-fm-title);
    font-weight: var(--v-f-w-title);
}
// 链接
#typora-source .cm-link {
    color: @aHoverColor;
    font-family: var(--monospace);
    font-weight: normal;
    text-decoration: none;
}
// 图片语法内链接
#typora-source .cm-string + .cm-link,
#typora-source .cm-tag + .cm-link,
#typora-source .cm-overlay + .cm-link {
    color: var(--d-f-c-alt);
}
// 图片
#typora-source .cm-tag {
    color: @aColor;
    font-family: var(--monospace);
}
// 链接内容
#typora-source .cm-string {
    color: var(--d-f-c-alt);
    font-family: var(--monospace);
}
// 引用
#typora-source pre.cm-atom {
    background: var(--blockquote-bg);
}
#typora-source .cm-atom,
#typora-source .cm-atom .cm-number {
    color: var(--d-f-c);
}
// 代码
#typora-source .cm-comment {
    font-size: 0.9em;
    font-family: var(--monospace);
    background: var(--code-bg);
}
// 粗体
#typora-source .cm-strong {
    font-family: var(--v-f-fm-bd);
}
// 删除
#typora-source .cm-del {
    color: var(--d-f-c-alt);
}
// 表格行
#typora-source pre.cm-table-row {
    font-family: var(--monospace);
}
// 当前焦点行
#typora-source .CodeMirror-activeline-background {
    // background: none;
    border-bottom: @focusStyle;
}
// 列表序号
#typora-source .cm-block-start.cm-variable-2 {
    color: var(--d-f-c-alt);
    font-family: var(--v-f-fm-num);
}
// 源码模式下的 YAML
#typora-source pre.cm-yaml {
    font-family: var(--monospace);
    font-weight: var(--v-f-w-text);
    font-size: 0.875em;
    background: var(--code-bg);
}

#write sup.md-footnote {
    color: var(--d-f-c-alt);
    background: none;
    padding: 0;
    margin-left: 0.2em;
    margin-right: 0.2em;
}

.md-meta {
    color: @buttonBgColor;
}

// 针对在编辑模式时无效图片链接的样式
.md-img-error > .md-meta {
    background: var(--ac-red-alt);
    color: var(--ac-red-lg) !important;
    font-style: italic;
    border: 4px dashed var(--ac-red-lg);
    border-radius: var(--v-r-b);
    line-height: @paragraphInnerLineHeight;
    padding: 1px;
}
// 排除多媒体类的
.md-img-error[data-src$=".mp3"] > .md-meta,
.md-img-error[data-src$=".m4a"] > .md-meta,
.md-img-error[data-src$=".ogg"] > .md-meta,
.md-img-error[data-src$=".wav"] > .md-meta,
.md-img-error[data-src*=".mp3?"] > .md-meta,
.md-img-error[data-src*=".m4a?"] > .md-meta,
.md-img-error[data-src*=".ogg?"] > .md-meta,
.md-img-error[data-src*=".wav?"] > .md-meta,
.md-img-error[data-src$=".ogv"] > .md-meta,
.md-img-error[data-src$=".mp4"] > .md-meta,
.md-img-error[data-src$=".webm"] > .md-meta,
.md-img-error[data-src*=".ogv"] > .md-meta,
.md-img-error[data-src*=".mp4"] > .md-meta,
.md-img-error[data-src*=".webm"] > .md-meta {
    background: none;
    color: var(--h-f);
    border: inherit;
    padding: inherit;
    border-radius: inherit;
}

// header 锚点占位
.md-header-anchor {
    margin: 0 !important;
    vertical-align: top !important;
}

// 重新定义 emoji 符号在编辑时的排版
.md-emoji-span::before {
    vertical-align: baseline;
}

// 脚注行序号
.md-fn-count {
    font-family: var(--v-f-fm-bd);
    font-weight: normal;
}

.md-fn-count::before {
    content: "[";
}

.md-fn-count::after {
    content: "] ";
}

// YAML 的样式
#write > pre.md-meta-block {
    font-family: var(--monospace);
    font-weight: var(--v-f-w-text);
    font-size: 0.875em;
    line-height: @paragraphInnerLineHeight;
    border-radius: var(--v-r-b);
    padding: 4px 10px;
    color: var(--d-f-c);
    background: var(--code-bg);
}

/**************************************
* Header Counters in TOC 目录中的标题序号样式
**************************************/

/* No link underlines in TOC */

.md-toc-content,
.outline-content {
    counter-reset: h1toc;
}

.md-toc-h1 {
    margin-left: 0;
    padding-left: 10px;
    // counter-reset: h2toc;
}
.md-toc-h1,
.outline-h1 {
    counter-reset: h2toc;
}

.md-toc-h2 {
    margin-left: 0;
    padding-left: 20px;
    // counter-reset: h3toc;
}
.md-toc-h2,
.outline-h2 {
    counter-reset: h3toc;
}

.md-toc-h3 {
    margin-left: 0;
    padding-left: 30px;
    // counter-reset: h4toc;
}
.md-toc-h3,
.outline-h3 {
    counter-reset: h4toc;
}

.md-toc-h4 {
    margin-left: 0;
    padding-left: 40px;
    // counter-reset: h5toc;
}
.md-toc-h4,
.outline-h4 {
    counter-reset: h5toc;
}

.md-toc-h5 {
    margin-left: 0;
    padding-left: 50px;
    // counter-reset: h6toc;
}
.md-toc-h5,
.outline-h5 {
    counter-reset: h6toc;
}

.md-toc-h6,
.outline-h6 {
    counter-reset: h6toc;
}

.md-toc-content > .md-toc-h6:first-child ~ .md-toc-h1:last-child, // 有封面的情况下，最后一个 h1 为封底
.md-toc-h6 {
    display: none;
    margin-left: 0;
    padding-left: 50px;
}

.outline-label {
    word-break: break-all;
}

.outline-label::before {
    color: var(--d-f-c-alt);
}

.md-toc-h1::before,
.outline-h1 .outline-label::before {
    counter-increment: h1toc;
    content: counter(h1toc) ".  ";
}

.md-toc-h1 > .md-toc-inner {
    margin-left: 0;
    font-weight: var(--v-f-w-title);
}

.md-toc-h2::before,
.outline-h2 .outline-label::before {
    counter-increment: h2toc;
    content: counter(h1toc) "." counter(h2toc) "  ";
}

.md-toc-h2 > .md-toc-inner {
    margin-left: 0;
}

.md-toc-h3::before,
.outline-h3 .outline-label::before {
    counter-increment: h3toc;
    content: counter(h1toc) "." counter(h2toc) "." counter(h3toc) "  ";
}

.md-toc-h3 > .md-toc-inner {
    margin-left: 0;
}

.md-toc-h4::before,
.outline-h4 .outline-label::before {
    counter-increment: h4toc;
    content: counter(h1toc) "." counter(h2toc) "." counter(h3toc) "." counter(h4toc) "  ";
}

.md-toc-h4 > .md-toc-inner {
    margin-left: 0;
}

.md-toc-h5::before,
.outline-h5 .outline-label::before {
    counter-increment: h5toc;
    content: counter(h1toc) "." counter(h2toc) "." counter(h3toc) "." counter(h4toc) "." counter(h5toc) "  ";
}

.md-toc-h5 > .md-toc-inner {
    margin-left: 0;
}

.md-toc-h6::before,
.outline-h6 .outline-label::before {
    counter-increment: h6toc;
    content: "";
}

// 导出 HTML 后的目录大纲内的自动编码内容
body.typora-export .md-toc-h1::before,
body.typora-export .md-toc-h2::before,
body.typora-export .md-toc-h3::before,
body.typora-export .md-toc-h4::before,
body.typora-export .md-toc-h5::before {
    content: attr(d-header-num) !important;
}

// 有序、无序列表下的图片、非图片段落
#write li .md-p > span:not([class*=md-image]) {
    margin-top: 0;
    margin-bottom: 0;
}
#write li .md-p > span[class*=md-image] {
    margin-bottom: @paragraphPadding;
    // margin-bottom: 20px;
}

// 有序列表下的任务列表
#write ol > .md-task-list-item { // 1 级
    list-style-type: decimal !important;
}
#write ol > li > ol > .md-task-list-item { // 2 级
    list-style-type: lower-alpha !important;
}
#write ol > li > ol > li > ol > .md-task-list-item { // 3 级
    list-style-type: lower-roman !important;
}
#write ol > li > ol > li > ol > li > ol > .md-task-list-item { // 4 级
    list-style-type: decimal-leading-zero !important;
}
#write ol > li > ol > li > ol > li > ol > li > ol > .md-task-list-item { // 5 级
    list-style-type: upper-alpha !important;
}
#write ol > li > ol > li > ol > li > ol > li > ol > li > ol > .md-task-list-item { // 6 级
    list-style-type: upper-roman !important;
}

// 无序列表下的任务列表
#write ul > .md-task-list-item { // 1 级
    list-style-type: decimal !important;
}
#write ul > li > ul > .md-task-list-item { // 2 级
    list-style-type: lower-alpha !important;
}
#write ul > li > ul > li > ul > .md-task-list-item { // 3 级
    list-style-type: lower-roman !important;
}
#write ul > li > ul > li > ul > li > ul > .md-task-list-item { // 4 级
    list-style-type: decimal-leading-zero !important;
}
#write ul > li > ul > li > ul > li > ul > li > ul > .md-task-list-item { // 5 级
    list-style-type: upper-alpha !important;
}
#write ul > li > ul > li > ul > li > ul > li > ul > li > ul > .md-task-list-item { // 6 级
    list-style-type: upper-roman !important;
}

// task list checkbox
.md-task-list-item > input {
    margin-left: -0.5em !important;
    margin-top: 0.3em !important;
}

// task list text
.md-task-list-item > p {
    margin-left: 1.25em !important;
    margin-top: 0;
    margin-bottom: 0;
}

.md-diagram-panel-preview {
    padding-top: 0;
}

.md-diagram-panel {
    border-radius: var(--v-r-b);
    margin-bottom: @paragraphPadding;
    // margin-bottom: 20px;
    padding: 0;
}

.md-diagram-panel svg {
    width: auto;
}

// ====================
// 第 1 题注（编辑时样式）
// 高亮内的斜体，或斜体内的高亮
// 针对题注简化语法的样式
// #write p > em > mark,
#write p > [md-inline="em"] > em > [md-inline="highlight"] > mark {
    font: normal 0.875em var(--v-f-fm-bd);
    background-color: var(--tbl-td-bg);
    box-shadow: none;
    text-shadow: none;
    padding: 2px 10px;
    margin: 0 0 0 calc(-1em - @aBorderWidth); // 非列表下的微调
    border-radius: var(--v-r-b) var(--v-r-b) 0 0;
}
// 引用内微调
// #write blockquote p > em > mark,
#write blockquote p > [md-inline="em"] > em > [md-inline="highlight"] > mark {
    margin: 0;
}
// #write li > p > em > mark,
#write li > p > [md-inline="em"] > em > [md-inline="highlight"] > mark {
    margin: 0; // 列表下的微调
}
// #write p > em > mark::before,
#write p > [md-inline="em"] > em > [md-inline="highlight"] > mark::before {
    content: "▼ 题注. ";
    color: var(--d-f-c-alt);
    font-size: 0.85em;
}
// --------------------
// 第 2 题注（编辑时样式）
// #write p > em > mark > em,
#write p > [md-inline="em"] > em > [md-inline="highlight"] > mark > [md-inline="em"] > em {
    font-style: normal;
    // border-bottom: 0;
}
// #write p > em > mark > em::before,
#write p > [md-inline="em"] > em > [md-inline="highlight"] > mark > [md-inline="em"] > em::before {
    content: " │ ▲ 题注. ";
    color: var(--d-f-c-alt);
    font-size: 0.85em;
}

/**************************************
* 重定义Typora原生样式
**************************************/

// 强制指定使用被修改过后的 --bg-color，确保背景图片能在 Typora 编辑时正常显示
content > #write {
    // background: var(--d-bc);
    background: var(--d-bc) var(--d-bi);
}

#write {
    max-width: 100%;
    margin: 0 auto;
    padding: 10px 20px;
}

#write > ul:first-child,
#write > ol:first-child {
    margin-top: 30px;
}

// 多行代码样式
.md-fences {
    color: var(--d-f-c);
    // font: normal 1em var(--v-f-fm-code); // [style] [weight] [size/[line-height]] [family]
    font-family: var(--v-f-fm-code);
    border-radius: var(--v-r-b);
    border: 2px solid var(--tbl-bder);
    margin: 0 0 @paragraphPadding 0;
    // margin: 0 0 20px 0;
}

// 代码块相关样式
#write pre.ty-contain-cm {
    padding: 0;
    border-radius: var(--v-r-b);
    width: 100%;
}

.CodeMirror-scroll {
    border-radius: var(--v-r-t);
}

.CodeMirror-sizer {
    background: var(--d-bc);
}

.CodeMirror pre {
    padding: 0 10px;
}

// .CodeMirror pre.CodeMirror-line {//:not(:first) {
//     margin-top: @paragraphPadding;
// }

.CodeMirror-line:hover {
    background: var(--tbl-th-bg);
    // background: var(--pn-c);
}

.CodeMirror.cm-s-inner {
    border-radius: var(--v-r-t);
}

.CodeMirror div.CodeMirror-cursor {
    border-left: 2px solid var(--cm-CodeMirror-cursor);
}

.CodeMirror-gutters {
    border-width: 0;
    background: var(--pn-c);
    border-right: 1px solid var(--pn-c);
    height: 100% !important; // 避免代码块的题注 hover 样式的背景色透出
}

.CodeMirror-linenumber {
    // color: @docTextColorLightAlt;
    // color: var(--d-f-c-alt);
    color: var(--h-f);
    // font: normal 1em var(--v-f-fm-num); // [style] [weight] [size/[line-height]] [family]
    font-family: var(--v-f-fm-num);
}

.cm-s-inner .cm-variable,
.cm-s-inner .cm-operator,
.cm-s-inner .cm-property {
    color: var(--cm-variable);
}

.cm-s-inner .cm-variable-2 {
    color: var(--cm-variable-2);
}

.cm-s-inner .cm-variable-3 {
    color: var(--cm-variable-3);
}

.cm-s-inner .cm-keyword {
    color: var(--cm-keyword);
}

.cm-s-inner .cm-tag {
    color: var(--cm-tag);
}

.cm-s-inner .cm-attribute {
    color: var(--cm-attribute);
}

.cm-s-inner .cm-string {
    color: var(--cm-string);
}

.cm-s-inner .cm-string-2 {
    color: var(--cm-string-2);
}

.cm-s-inner .cm-comment,
.cm-s-inner.cm-comment {
    color: var(--cm-comment);
}

.cm-s-inner .cm-header,
.cm-s-inner .cm-def,
.cm-s-inner.cm-header,
.cm-s-inner.cm-def {
    color: var(--cm-header);
}

.cm-s-inner .cm-quote,
.cm-s-inner.cm-quote {
    color: var(--cm-quote);
}

.cm-s-inner .cm-hr {
    color: var(--cm-hr);
}

.cm-s-inner .cm-link {
    color: var(--cm-link);
}

.cm-s-inner .cm-negative {
    color: var(--cm-negative);
}

.cm-s-inner .cm-positive {
    color: var(--cm-positive);
}


.cm-s-inner .cm-meta,
.cm-s-inner .cm-qualifier {
    color: var(--cm-meta);
}

.cm-s-inner .cm-builtin {
    color: var(--cm-bulidin);
}

.cm-s-inner .cm-bracket {
    color: var(--cm-bracket);
}

.cm-s-inner .cm-atom,
.cm-s-inner.cm-atom {
    color: var(--cm-atom);
}

.cm-s-inner .cm-number {
    color: var(--cm-number);
}

/* 数学公式 */
// .MathJax_SVG {
.MathJax_SVG_Display {
    border: 0;
    // border-left: 4px solid var(--blockquote-bg);
    overflow-x: auto;
    border: 2px solid var(--pn-c);
    border-radius: var(--v-r-b);
    padding: 10px;
    cursor: pointer;
}
// 公式编号标签
.MathJax_SVG g[id^=mjx-eqn-] {
    fill: var(--d-f-c-alt);
}
.MathJax_SVG_Display:hover {
    border-color: @aLineColor;
}
.MathJax_SVG_Display:active {
    transform: scale(1.5);
    border: 0;
}
.MathJax_SVG g text {
    color: var(--d-f-c);
}

// 行间（独占一行）数学公式
.md-math-container {
    font-size: 1.5em !important;
}

// 行内数学公式
mjx-container {
    // zoom: 0.7;
    font-size: 0.875em;
}

// 公式链接
mjx-container[jax="SVG"] > svg a {
    fill: var(--a-color) !important;
    stroke: var(--a-color) !important;
    box-shadow: 0 -0.3em 0 0 fade(@aLineColor, 30%) inset;
}
mjx-container[jax="SVG"] > svg a:hover {
    fill: @aHoverColor !important;
    stroke: @aHoverColor !important;
    box-shadow: 0 -0.3em 0 0 fade(@aLineColor, 30%) inset;
}
mjx-container[jax="SVG"] > svg a:active {
    fill: @aHoverColor !important;
    stroke: @aHoverColor !important;
    box-shadow: 0 0 0 2px fade(@aHoverColor, 50%);
}

/** focus mode */

// .on-focus-mode blockquote {
//     border-left-color: @docTextColorLight;
// }
